<script lang="ts" setup>
// 导入系统用户 API 类型定义
import type { ModianVisitorLogApi } from '#/api/moxi/modianvisitorlog';

// 从 Vue 导入计算属性和响应式引用相关函数
import { ref } from 'vue';

// 导入自定义抽屉组件钩子函数
import { useVbenDrawer } from '@vben/common-ui';

// 导入消息提示组件
// 导入国际化函数
import { $t } from '#/locales';

import descriptions from './descriptions.vue';

// 定义自定义事件，用于通知父组件操作成功
// const emit = defineEmits(['success']);
// // 计算属性，根据是否有表单数据的 id 来动态生成标题
// const getTitle = computed(() => {
//   return formData.value?.id
//     ? $t('ui.actionTitle.edit', ['用户']) // 有 id 表示编辑操作
//     : $t('ui.actionTitle.create', ['用户']); // 没有 id 表示创建操作
// });

// 使用自定义表单钩子函数创建表单组件和表单 API
// const [Form, formApi] = useVbenForm({
//   commonConfig: {
//     componentProps: {
//       class: 'w-full', // 设置表单项宽度为 100%
//     },
//   },
//   // 表单布局为 2 列
//   wrapperClass: 'grid-cols-2',
//   // 表单布局模式为水平布局
//   layout: 'horizontal',
//   // 获取表单模式配置
//   schema: useFormSchema(),
//   // 不显示默认的操作按钮
//   showDefaultActions: false,
// });


const cansRef = ref();
// 定义响应式引用，用于存储表单数据
const formData = ref<ModianVisitorLogApi.ModianVisitorLog>();

// 使用自定义抽屉钩子函数创建抽屉组件和抽屉 API
const [Drawer, DrawerApi] = useVbenDrawer({
    // 抽屉确认事件处理函数
    async onConfirm() {
        // 锁定抽屉，防止用户重复操作
        DrawerApi.lock();
        try {
            console.log(123);
            const result = await cansRef.value.handleBindCamera();
            if (result) {
                // 成功才关闭抽屉
                await DrawerApi.close();
            }
        } finally {
            // 解锁抽屉
            DrawerApi.unlock();
        }
    },
    // 抽屉打开状态变化事件处理函数
    async onOpenChange(isOpen: boolean) {
        // 若抽屉关闭，清空表单数据
        if (!isOpen) {
            formData.value = undefined;
            return;
        }
        // 获取抽屉传递的数据
        const data = DrawerApi.getData<ModianVisitorLogApi.ModianVisitorLog>();
        formData.value = data;
        console.log('抽屉打开状态变化事件处理函数');
        console.log(data);

        // 若没有数据或没有 id，直接返回
        if (!data || !data.id) {
            return;
        }
        // 锁定抽屉，防止用户重复操作
        DrawerApi.lock();
        try {
            // const res = await getModianVisitorLog(data.id as number);
            // console.log('访客报表');
            // console.log(res);
        } finally {
            // 解锁抽屉
            DrawerApi.unlock();
        }
    },
});
</script>

<template>
    <!-- 渲染抽屉组件，设置标题和宽度 -->
    <Drawer title="摄像头选择" class="w-1/2">
        <!-- 渲染表单组件，设置左右外边距 -->
        <descriptions ref="cansRef" :id="formData?.id" />
    </Drawer>
</template>
